<template>
  <el-dialog
    v-el-drag-dialog
    title="扫码详情"
    :visible.sync="visible"
    width="1024px"
    append-to-body
  >
    <lb-table
      ref="lbTable"
      border
      element-loading-text="加载中"
      :column="column"
      :data="tableData.data"
      :page-size="10"
      pagination
      :total="tableData.total"
      :immediate-fetch="false"
      @fetch="fetchData"
    />
    <csm-detail ref="csmDetail" />
  </el-dialog>
</template>

<script>
  import { queryScanDetailList } from '@/api'
  import { parseTime } from '@/utils'
  import CsmDetail from '@/views/components/CsmDetailModal'

  export default {
    name: 'ScanDetail',
    components: {
      CsmDetail
    },
    data() {
      return {
        visible: false,
        temp: {},
        params: {},
        tableData: {
          total: 0,
          data: []
        }
      }
    },
    computed: {
      column: function() {
        const cols = [
          {
            prop: 'operatorTime',
            label: '扫码时间',
            width: 160,
            render: (h, { row }) => <span>{ row.operatorTime && parseTime(row.operatorTime, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
          },
          {
            prop: 'csmCode',
            label: '客户编号'
          },
          {
            prop: 'csmName',
            label: '客户名称',
            render: (h, { row }) => <el-link underline={false} onClick={() => this.openCsmDetail(row)}>{row.csmName}</el-link>
          },
          {
            prop: 'csmPhone',
            width: 110,
            label: '电话'
          },
          {
            prop: 'csmAddress',
            showOverflowTooltip: true,
            label: '地址',
            width: 200
          },
          {
            prop: 'orderCode',
            label: '订单号'
          },
          {
            label: '出库->入库',
            render: (h, { row }) => {
              if (!row.outStoreName && !row.inStoreName) {
                const showVal = row.outStoreName + '->' + row.inStoreName
                return <span>{ showVal || '' }</span>
              }
              return ''
            }
          },
          {
            prop: 'bottleCode',
            showOverflowTooltip: true,
            label: '气瓶编码',
            width: 200
          },
          {
            prop: 'chipCode',
            showOverflowTooltip: true,
            label: '芯片编码',
            width: 200
          }
        ]
        if ([11, 12, 13, 14].includes(this.params.billType)) {
          cols.splice(1, 5)
        } else if ([16, 17].includes(this.params.billType)) {
          cols.splice(6, 1)
        } else if ([18, 19].includes(this.params.billType)) {
          cols.splice(5, 2)
        }
        return cols
      },
      colClassName: function() {
        if ([11, 12, 13, 14].includes(this.params.billType)) {
          return 'csm-hidden'
        } else if ([16, 17].includes(this.params.billType)) {
          return 'goodsCount-hidden'
        } else if ([18, 19].includes(this.params.billType)) {
          return 'goodsCount-hidden orderCode-hidden'
        }
        return ''
      }
    },
    methods: {
      open(temp, params) {
        return new Promise(resolve => {
          this.temp = temp
          this.params = params
          this.resolve = resolve
          this.visible = true
          this.fetchData({ currentPage: 1, pageSize: 10 })
        })
      },
      async fetchData({ currentPage, pageSize }) {
        const params = {
          billType: this.params.billType,
          operatorId: this.temp.operatorId,
          goodsId: this.params.goodsId,
          gdStatus: this.params.gdStatus,
          inStoreId: this.params.inStoreId,
          outStoreId: this.params.inStoreId,
          operatorTime: this.params.operatorTime,
          operatorTimeEnd: this.params.operatorTimeEnd,
          currentPage,
          pageSize
        }
        const res = await queryScanDetailList(params)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      },
      // 点击客户名称
      async openCsmDetail(row) {
        await this.$refs.csmDetail.open(row)
      }
    }
  }
</script>

<style scoped>

</style>
